import React, {useState} from "react";
import "../../../css/trade_mode.css"
import InputCaptureTraditional from "./InputCaptureTraditional";
import InputCaptureNLP from "./InputCaptureNLP";

const InputBanner = ()=>{

    const [component,setComponent] = useState(<InputCaptureTraditional/>)

    const [activeTra,setActiveTra] = useState('Traditional Trade');
    const tradeModes = ['Traditional Trade','NLP Trade'];

    const onClickTra = (mode)=>{
        setActiveTra(mode);
        switch (mode){
            case 'Traditional Trade':
                setComponent(<InputCaptureTraditional/>)
                break
            case 'NLP Trade':
                setComponent(<InputCaptureNLP/>)
                break
        }
    };

    return(
        <div>
            <div className={'tra-group'}>
                {tradeModes.map((item)=>(
                    <span key={item}
                          className={activeTra === item ? 'tra-item active' : 'tra-item'}
                          onClick={()=>onClickTra(item)}>
                    {item}
                </span>
                ))}
            </div>
            {component}
        </div>

    )
}

export default InputBanner